<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML教程 - 常用标签参考</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1, h2, h3 {
            color: #333;
        }
        .example {
            background: #f9f9f9;
            border-left: 4px solid #007BFF;
            padding: 10px;
            margin: 10px 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        form {
            background: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML教程 - 常用标签参考</h1>
        
        <h2>文字标签</h2>
        <div class="example">
            <p>这是普通段落文本。</p>
            <p><strong>这是粗体文本。</strong></p>
            <p><em>这是斜体文本。</em></p>
            <p><u>这是下划线文本。</u></p>
            <p><small>这是小号文本。</small></p>
            <p>这是<mark>高亮文本</mark>。</p>
            <p>这是<del>删除线文本</del>。</p>
            <p>这是<ins>插入文本</ins>。</p>
            <p>这是<sub>下标文本</sub>和<sup>上标文本</sup>。</p>
        </div>
        
        <h2>超链接</h2>
        <div class="example">
            <p>访问<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN HTML文档</a>了解更多。</p>
        </div>
        
        <h2>段落和换行</h2>
        <div class="example">
            <p>这是第一个段落。</p>
            <p>这是第二个段落。</p>
            <p>这是同一段落中的<br>换行文本。</p>
        </div>
        
        <h2>图片</h2>
        <div class="example">
            <img src="src/assets/image01.jpg" alt="示例图片" width="200" height="200">
        </div>
        
        <h2>表格</h2>
        <div class="example">
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>城市</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>张三</td>
                        <td>25</td>
                        <td>北京</td>
                    </tr>
                    <tr>
                        <td>李四</td>
                        <td>30</td>
                        <td>上海</td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <h2>列表</h2>
        <h3>无序列表</h3>
        <div class="example">
            <ul>
                <li>项目一</li>
                <li>项目二
                    <ul>
                        <li>子项目一</li>
                        <li>子项目二</li>
                    </ul>
                </li>
                <li>项目三</li>
            </ul>
        </div>
        
        <h3>有序列表</h3>
        <div class="example">
            <ol>
                <li>第一步</li>
                <li>第二步</li>
                <li>第三步</li>
            </ol>
        </div>
        
        <h3>描述列表</h3>
        <div class="example">
            <dl>
                <dt>HTML</dt>
                <dd>超文本标记语言，用于创建网页结构。</dd>
                <dt>CSS</dt>
                <dd>层叠样式表，用于设计网页样式。</dd>
                <dt>JavaScript</dt>
                <dd>编程语言，用于网页交互。</dd>
            </dl>
        </div>
        
        <h2>表单</h2>
        <div class="example">
            <form action="#" method="post">
                <div class="form-group">
                    <label for="name">姓名:</label>
                    <input type="text" id="name" name="name" required>
                </div>
                
                <div class="form-group">
                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                
                <div class="form-group">
                    <label for="age">年龄:</label>
                    <input type="number" id="age" name="age" min="1" max="120">
                </div>
                
                <div class="form-group">
                    <label for="gender">性别:</label>
                    <select id="gender" name="gender">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>爱好:</label>
                    <input type="checkbox" id="reading" name="hobby" value="reading">
                    <label for="reading">阅读</label>
                    <input type="checkbox" id="music" name="hobby" value="music">
                    <label for="music">音乐</label>
                    <input type="checkbox" id="sports" name="hobby" value="sports">
                    <label for="sports">运动</label>
                </div>
                
                <div class="form-group">
                    <label>职业:</label>
                    <input type="radio" id="student" name="occupation" value="student">
                    <label for="student">学生</label>
                    <input type="radio" id="teacher" name="occupation" value="teacher">
                    <label for="teacher">教师</label>
                    <input type="radio" id="engineer" name="occupation" value="engineer">
                    <label for="engineer">工程师</label>
                </div>
                
                <div class="form-group">
                    <label for="message">留言:</label>
                    <textarea id="message" name="message" rows="4"></textarea>
                </div>
                
                <div class="form-group">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </div>
            </form>
        </div>
        
        <h2>Div和Span</h2>
        <div class="example">
            <div style="background-color: #e7e7e7; padding: 10px; margin: 10px 0;">
                <p>这是一个div容器，用于分组HTML元素。</p>
                <p>这是<span style="color: red;">红色文本</span>，使用span标签。</p>
            </div>
        </div>
        
        <h2>媒体元素</h2>
        <div class="example">
            <h3>音频</h3>
            <audio controls>
                <source src="/src/assets/huanghe.mp3" type="audio/mpeg">
                您的浏览器不支持音频元素。
            </audio>
            
            <h3>视频</h3>
            <video width="320" height="240" controls>
                <source src="/src/assets/baowei.mp4" type="video/mp4">
                您的浏览器不支持视频元素。
            </video>
        </div>
        
        <h2>Canvas游戏 - 可控制人物</h2>
        <div class="example">
            <p>使用方向键 ← → 控制人物左右移动，Z键跳跃（支持二段跳和无限向上跳跃）</p>
            <canvas id="gameCanvas" width="800" height="400" style="border: 1px solid #ccc; background-color: #f0f8ff;">
                您的浏览器不支持Canvas元素。
            </canvas>
            <div style="margin-top: 10px;">
                <p><strong>操作说明：</strong></p>
                <ul>
                    <li>← → 方向键：左右移动</li>
                    <li>Z键：跳跃（可二段跳，无限向上）</li>
                    <li>R键：重置游戏</li>
                </ul>
            </div>
        </div>
        
        <h2>语义化标签</h2>
        <div class="example">
            <header>
                <h3>这是页面头部</h3>
            </header>
            
            <nav>
                <p>这是导航栏</p>
            </nav>
            
            <main>
                <p>这是主要内容区域</p>
            </main>
            
            <aside>
                <p>这是侧边栏</p>
            </aside>
            
            <footer>
                <p>这是页面底部</p>
            </footer>
        </div>
    </div>
    
    <script>
        // 获取Canvas元素和上下文
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // 玩家对象
        const player = {
            x: 100,
            y: 300,
            width: 40,
            height: 60,
            speed: 5,
            velX: 0,
            velY: 0,
            jumping: false,
            doubleJumping: false,
            grounded: false
        };
        
        // 重力和跳跃力度
        const gravity = 0.5;
        const jumpStrength = -12;
        
        // 按键状态
        const keys = {};
        
        // 平台数组
        let platforms = [
            {x: 0, y: 380, width: 800, height: 20}, // 地面
            {x: 200, y: 300, width: 100, height: 20},
            {x: 400, y: 250, width: 100, height: 20},
            {x: 600, y: 200, width: 100, height: 20}
        ];
        
        // 记录最高平台的高度，用于生成新平台
        let highestPlatformY = 200;
        
        // 生成新平台的函数
        function generateNewPlatforms() {
            // 当玩家跳到一定高度时，生成新平台
            const minY = player.y - 200; // 玩家上方200像素的位置
            
            // 如果玩家跳得足够高，生成新平台
            if (minY < highestPlatformY) {
                // 更新最高平台高度
                highestPlatformY = minY;
                
                // 只生成一个新平台
                // 随机生成平台位置，但确保玩家能够跳到
                const platformWidth = 80 + Math.random() * 40; // 80-120像素宽
                const platformX = Math.random() * (canvas.width - platformWidth); // 随机X位置
                
                // 确保平台之间的垂直间距适合跳跃
                const platformY = minY - 50 - Math.random() * 30; // 在玩家上方50-80像素处
                
                platforms.push({
                    x: platformX,
                    y: platformY,
                    width: platformWidth,
                    height: 20
                });
            }
            
            // 移除屏幕下方太远的平台以优化性能
            platforms = platforms.filter(platform => platform.y < player.y + 300);
        }
        
        // 监听键盘事件
        window.addEventListener('keydown', function(e) {
            keys[e.keyCode] = true;
            
            // R键重置游戏
            if (e.keyCode === 82) { // R键
                resetGame();
            }
        });
        
        window.addEventListener('keyup', function(e) {
            keys[e.keyCode] = false;
        });
        
        // 重置游戏函数
        function resetGame() {
            player.x = 100;
            player.y = 300;
            player.velX = 0;
            player.velY = 0;
            player.jumping = false;
            player.doubleJumping = false;
        }
        
        // 碰撞检测函数
        function collisionCheck(obj1, obj2) {
            return obj1.x < obj2.x + obj2.width &&
                   obj1.x + obj1.width > obj2.x &&
                   obj1.y < obj2.y + obj2.height &&
                   obj1.y + obj1.height > obj2.y;
        }
        
        // 更新玩家状态
        function updatePlayer() {
            // 左右移动控制
            if (keys[37] || keys[65]) { // 左箭头键或A键
                player.velX = -player.speed;
            } else if (keys[39] || keys[68]) { // 右箭头键或D键
                player.velX = player.speed;
            } else {
                player.velX = 0;
            }
            
            // 跳跃控制
            if (keys[90] && !player.jumping && player.grounded) { // Z键
                player.jumping = true;
                player.grounded = false;
                player.velY = jumpStrength;
            } else if (keys[90] && !player.doubleJumping && !player.grounded) {
                player.doubleJumping = true;
                player.velY = jumpStrength * 0.8;
            }
            
            // 应用重力
            player.velY += gravity;
            
            // 更新位置
            player.x += player.velX;
            player.y += player.velY;
            
            // 边界检测
            if (player.x < 0) {
                player.x = 0;
            } else if (player.x + player.width > canvas.width) {
                player.x = canvas.width - player.width;
            }
            
            // 平台碰撞检测
            player.grounded = false;
            for (let i = 0; i < platforms.length; i++) {
                const p = platforms[i];
                
                // 碰撞检测（使用原始坐标进行碰撞检测）
                const direction = collisionCheckDir(player, p);
                
                if (direction === "left" || direction === "right") {
                    player.velX = 0;
                } else if (direction === "bottom") {
                    player.grounded = true;
                    player.jumping = false;
                    player.doubleJumping = false;
                    player.velY = 0;
                } else if (direction === "top") {
                    player.velY *= -0.5;
                }
            }
            
            // 如果站在地面上，重置跳跃状态
            if (player.grounded) {
                player.jumping = false;
                player.doubleJumping = false;
            }
            
            // 如果掉出画布底部太多，重置游戏
            if (player.y > highestPlatformY + 1000) {
                resetGame();
            }
        }
        
        // 碰撞方向检测
        function collisionCheckDir(obj1, obj2) {
            // 获取两个矩形的中心点
            const obj1CenterX = obj1.x + obj1.width / 2;
            const obj1CenterY = obj1.y + obj1.height / 2;
            const obj2CenterX = obj2.x + obj2.width / 2;
            const obj2CenterY = obj2.y + obj2.height / 2;
            
            // 计算两个矩形中心点之间的距离
            const distX = Math.abs(obj1CenterX - obj2CenterX);
            const distY = Math.abs(obj1CenterY - obj2CenterY);
            
            // 计算矩形半宽和半高之和
            const sumHalfWidths = obj1.width / 2 + obj2.width / 2;
            const sumHalfHeights = obj1.height / 2 + obj2.height / 2;
            
            // 如果没有碰撞，返回null
            if (distX >= sumHalfWidths || distY >= sumHalfHeights) {
                return null;
            }
            
            // 计算重叠部分
            const overlapX = sumHalfWidths - distX;
            const overlapY = sumHalfHeights - distY;
            
            // 根据重叠部分判断碰撞方向
            if (overlapX >= overlapY) {
                if (obj1CenterY > obj2CenterY) {
                    // 从上方碰撞
                    obj1.y = obj2.y + obj2.height;
                    return "top";
                } else {
                    // 从下方碰撞
                    obj1.y = obj2.y - obj1.height;
                    return "bottom";
                }
            } else {
                if (obj1CenterX > obj2CenterX) {
                    // 从左侧碰撞
                    obj1.x = obj2.x + obj2.width;
                    return "left";
                } else {
                    // 从右侧碰撞
                    obj1.x = obj2.x - obj1.width;
                    return "right";
                }
            }
        }
        

        
        // 游戏主循环
        function gameLoop() {
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制背景
            ctx.fillStyle = '#f0f8ff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 生成新平台
            generateNewPlatforms();
            
            // 绘制平台（视角跟随玩家）
            ctx.fillStyle = '#8B4513';
            for (let i = 0; i < platforms.length; i++) {
                const p = platforms[i];
                // 调整平台位置以实现视角跟随
                const drawX = p.x;
                const drawY = p.y - player.y + 300; // 将玩家保持在画布中央偏下位置
                ctx.fillRect(drawX, drawY, p.width, p.height);
            }
            
            // 更新和绘制玩家（视角跟随）
            updatePlayer();
            // 调整玩家绘制位置以实现视角跟随
            const playerDrawY = player.y - player.y + 300; // 将玩家保持在画布中央偏下位置
            drawPlayerAtPosition(player.x, playerDrawY);
            
            // 绘制操作说明
            ctx.fillStyle = '#000';
            ctx.font = '14px Arial';
            ctx.fillText('使用方向键 ← → 控制移动，Z键跳跃（无限向上）', 10, 20);
            ctx.fillText('R键重置游戏', 10, 40);
            
            // 请求下一帧
            requestAnimationFrame(gameLoop);
        }
        
        // 绘制玩家（指定位置）
        function drawPlayerAtPosition(x, y) {
            // 身体
            ctx.fillStyle = '#3498db';
            ctx.fillRect(x, y, player.width, player.height);
            
            // 头部
            ctx.fillStyle = '#f1c40f';
            ctx.fillRect(x + 10, y - 15, 20, 20);
            
            // 眼睛
            ctx.fillStyle = '#000';
            ctx.fillRect(x + 15, y - 10, 3, 3);
            ctx.fillRect(x + 22, y - 10, 3, 3);
            
            // 腿部动画（根据移动状态）
            ctx.fillStyle = '#3498db';
            if (player.velX !== 0) {
                // 移动时腿部摆动
                const legOffset = Math.sin(Date.now() / 100) * 5;
                ctx.fillRect(x + 10, y + player.height, 5, 15 + legOffset);
                ctx.fillRect(x + 25, y + player.height, 5, 15 - legOffset);
            } else {
                // 静止时腿部垂直
                ctx.fillRect(x + 10, y + player.height, 5, 15);
                ctx.fillRect(x + 25, y + player.height, 5, 15);
            }
            
            // 手臂
            ctx.fillStyle = '#f1c40f';
            ctx.fillRect(x, y + 15, 10, 5);
            ctx.fillRect(x + player.width, y + 15, 10, 5);
        }
        
        // 启动游戏循环
        gameLoop();
    </script>
</body>
</html>